<script setup lang="ts">

import {reactive, ref} from "vue";
import {cancelNoBooking, changeArrive, getAppointment, getTeacher, noBooking} from "@/api/interface/reuqest";
import {dayjs, ElMessage, FormInstance} from "element-plus";
import {handleCurrentChange} from "element-plus/es/components/tree/src/model/util";
import {Refresh, Search} from "@element-plus/icons-vue";
import {Arrive} from "@/api/interface/interfaceRequest";
import {noBook} from "@/api/interface/interfaceRequest";

//时间选择器
const value1 = ref('')
let formInline = reactive({
    endTime: '',
    startTime: '',
    psyClass: '',
    statusType: '',
    stuName: '',
    stuNum: '',
    teacherName: ""
})
const forbiddenValue = reactive({
    durationHour: ''
})

//查询请求
let teacherList = ref([])
let pageSizeTeacher = {
    pageSize: 999
}
getTeacher(pageSizeTeacher).then((item) => {
    if (item.code === 200) {
        teacherList.value = item.rows
    }
})
let classList = ref([])
let list = ref<any>([])
//获取班级
let pageSizeClass = {
    pageSize: 999
}
getAppointment(pageSizeClass).then((item: any) => {
    // console.log(item)
    if (item.code === 200) {
        classList.value = item.rows
        // console.log(classList.value)
        let obj
        obj = classList.value.filter((item) => {
            // console.log(item)
            return item.psyClass !== null
        })
        // console.log(obj)
        let classObj = ref({})
        for (let i = 0; i < obj.length; i++) {
            // let classname = obj[i].psyClass.name
            classObj.value[obj[i].psyClass.name] = 1
        }
        // console.log(classObj.value)
        for (let x in classObj.value) {
            list.value.push(x)
        }
        // console.log(list.value)
    }
})

let params = ref({
    pageNum: 1,
    pageSize: 10,
    endTime: '',
    startTime: '',
    psyClass: '',
    statusType: '',
    stuName: '',
    stuNum: '',
    teacherName: ''
})
//页面展示

let tableData = ref([])
let dialogFormVisible = ref(false)
let handleClickView = ref(false)
let forbiddenView = ref(false)
let arriveList = ref([])
let idList = ref([])
let arriveView = ref([])
let stuIdList = ref([])
let obj = {}

function getList() {
    getAppointment(params.value).then((item) => {
        console.log(item)
        let statu = ''
        if (item.code === 200) {
            tableData.value = item.rows.map((value, index) => {
                // console.log(value)
                switch (value.status) {
                    case '0':
                        statu = "待开始";
                        break;
                    case '1':
                        statu = "待录档";
                        break;
                    case '2':
                        statu = "已完成";
                        break;
                    case '3':
                        statu = "学生已取消";
                        break;
                    case '4':
                        statu = "老师已取消";
                        break;
                }
                if(value.psyClass){
                    obj = {
                        index: index + 1,
                        id: value?.psyStudent?.id,
                        name: value?.psyStudent?.name,
                        psyClass: value?.psyClass?.name,
                        stuNmu: value?.psyStudent?.stuNum,
                        phone: value?.psyStudent?.phoneNumber,
                        psyTeacher: value?.psyTeacher?.name,
                        content: value?.content,
                        scheduling: value.psyScheduling.date + value.psyScheduling.startTime + '-' +  value.psyScheduling.endTime,
                        mode: value?.mode,
                        modeLabel: '个人预约',
                        duration: value?.duration +'分钟',
                        remainingForbiddenHour:value?.psyStudent?.remainingForbiddenHour + '小时',
                        state: value?.psyStudent?.status,
                        status: statu,
                    }
                    arriveView.value.push(1)
                } else{
                    obj = {
                        index: index + 1,
                        id:'',
                        name: '',
                        psyClass: '',
                        stuNmu: '',
                        phone: '',
                        psyTeacher: '',
                        content: '该学生已注销',
                        scheduling: '',
                        mode: '',
                        modeLabel: '',
                        duration: '',
                        remainingForbiddenHour:'',
                        state: '',
                        status: '',
                    }
                    arriveView.value.push(0)
                }
                // console.log(obj)
                arriveList.value.push(value.arrive)
                // idList.value.push(value.id)
                if (value.psyStudent !== null) {
                    stuIdList.value.push(value.psyStudent.id)
                } else {
                    stuIdList.value.push(1)
                }
                return obj
            })
            // console.log(arriveView.value)
            // console.log(tableData.value)
            total = item.total
            data = item.data.totalDuration
            // console.log(stuIdList.value)
        }
    })
}

getList()

//输入框
function changeList() {
    // if()
    params.value = {
        pageNum: 1,
        pageSize: 10,
        endTime: formInline.endTime,
        startTime: formInline.startTime,
        psyClass: formInline.psyClass,
        statusType: formInline.statusType,
        stuName: formInline.stuName,
        stuNum: formInline.stuNum,
        teacherName: formInline.teacherName
    }
    arriveView.value = []
    arriveList.value = []
    getList()
}

//选择框
function handleChange() {
    params.value = {
        pageNum: 1,
        pageSize: 10,
        endTime: formInline.endTime,
        startTime: formInline.startTime,
        psyClass: formInline.psyClass,
        statusType: formInline.statusType,
        stuName: formInline.stuName,
        stuNum: formInline.stuNum,
        teacherName: formInline.teacherName
    }
    arriveView.value = []
    arriveList.value = []
    getList()
}

//时间框
function handleTimeChange() {
    formInline.startTime = dayjs(value1.value[0]).format("YYYY-MM-DD")
    formInline.endTime = dayjs(value1.value[1]).format("YYYY-MM-DD")
    params.value = {
        pageNum: 1,
        pageSize: 10,
        endTime: formInline.endTime,
        startTime: formInline.startTime,
        psyClass: formInline.psyClass,
        statusType: formInline.statusType,
        stuName: formInline.stuName,
        stuNum: formInline.stuNum,
        teacherName: formInline.teacherName
    }
    arriveView.value = []
    arriveList.value = []
    getList()
}

//查看框
let handleClickObj = ref<any>({})
let handleClickListObj = ref({})
const handleClick = (index) => {
    // console.log(index)
    // getAppointment(params.value).then((item) => {
    //     if (item.code === 200) {
    //         // console.log(item)
    //         tableData.value = item.rows.map((value) => {
    //             // console.log(value)
    //             handleClickObj.value = {
    //                 name: value?.psyStudent?.name,
    //                 psyClass: value?.psyClass?.name,
    //                 stuNmu: value?.psyStudent?.stuNum,
    //                 psyTeacher: value?.psyTeacher?.name,
    //                 content: value?.content,
    //                 scheduling: value.createTime,
    //                 mode: value?.mode,
    //                 duration: value?.duration,
    //                 state: value?.psyStudent?.status,
    //                 studentFeedback: value?.studentFeedback
    //             }
    //             return handleClickObj.value
    //         })
    //     }
    // })
    handleClickListObj.value = tableData.value[index]
    // console.log(handleClickListObj.value)
    handleClickView.value = true
    // console.log(handleClickListObj)
}
//禁用框
let noBook = {
    studentId: '',
    durationHour: ''
}
//弹出禁用框
const forbidden = (id) => {
    // console.log(id)
    forbiddenView.value = true
    noBook.studentId = id
    // console.log(noBook.studentId)
}

//接收禁用时间
function forbiddenChange() {
    noBook.durationHour = forbiddenValue.durationHour
}

//确认禁用
function changeForbiddenObj() {
    //禁止预约请求
    if(noBook.durationHour != 0){
        noBooking(noBook).then((item) => {
            // console.log(item)
            ElMessage({
                message: '禁用成功',
                type: 'success',
            })
            forbiddenView.value = false
            getList()
        })
    } else {
        //取消禁用
        cancelNoBooking(noBook).then((item)=>{
            // console.log(item)
            ElMessage({
                message: '取消禁用成功',
                type: 'success',
            })
            forbiddenView.value = false
            getList()
        })
    }
}

let total = ref<number>()
let data = ref<number>()
let currentPage = ref<number>()

//监听页面分页器
function handleCurrentChange(newPage) {
    // console.log(newPage)
    params.value = {
        pageNum: newPage,
        pageSize: 10,
        endTime: formInline.endTime,
        startTime: formInline.startTime,
        psyClass: formInline.psyClass,
        statusType: formInline.statusType,
        stuName: formInline.stuName,
        stuNum: formInline.stuNum,
        teacherName: formInline.teacherName
    }
    arriveView.value = []
    arriveList.value = []
    getList()
}

//修改已到未到状态
let arriveObj = reactive<Arrive>({
    id: 0,
    arrive: 'null'
})

function changeFormVisible(index:number) {
    arriveObj = {
        id: idList.value[index],
        arrive: '1',
    }
    dialogFormVisible.value = true
}

function changeArriveObj() {
    changeArrive(arriveObj).then((item) => {
        if (item.code === 200) {
            console.log(item)
        }
    }).catch(()=>{
        // console.log('只能在当天修改')
        ElMessage({
            type: 'error',
            message: '只能在当天修改状态'
        });
    })
    dialogFormVisible.value = false
}

//搜索
function searchList() {
    arriveView.value = []
    arriveList.value = []
    getList()
}

//重置
const formRef = ref<FormInstance>()
const resetForm = (formEl: FormInstance | undefined) => {
    value1.value.length = 0
    params.value = {
        pageNum: 1,
        pageSize: 10,
        endTime: '',
        startTime: '',
        psyClass: '',
        statusType: '',
        stuName: '',
        stuNum: '',
        teacherName: ''
    }
    arriveList.value = []
    getList()
    // console.log(1)
    if (!formEl) return
    formEl.resetFields()
}
</script>

<template>
    <div class="box">
        <div>
            <el-form :inline="true" :model="formInline" class="demo-form-inline" ref="formRef">
                <el-form-item label="学生姓名" prop="stuName">
                    <el-input @input="changeList" v-model="formInline.stuName" placeholder="请输入学生姓名" clearable/>
                </el-form-item>
                <el-form-item label="班级" prop="psyClass">
                    <el-select
                        v-model="formInline.psyClass"
                        placeholder="请选择班级"
                        clearable
                        @change="handleChange"
                    >
                        <el-option v-for="(item,index) in list" :key="index" :label="item" :value="item"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="学号" prop="stuNum">
                    <el-input @input="changeList" v-model="formInline.stuNum" placeholder="请输入学号" clearable/>
                </el-form-item>
                <el-form-item label="咨询时间" prop="startTime" style="font-weight: bold">
                    <div class="block" style="font-weight: normal">
                        <el-date-picker
                            v-model="value1"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            format="YYYY-MM-DD HH:mm:ss"
                            date-format="YYYY/MM/DD ddd"
                            time-format="A hh:mm:ss"
                            @change="handleTimeChange"
                        />
                    </div>
                </el-form-item>
                <el-form-item label="赴约状态" prop="statusType">
                    <el-select
                        v-model="formInline.statusType"
                        placeholder="全部"
                        clearable
                        @change="handleChange"
                    >
                        <el-option label="已到" value="1"/>
                        <el-option label="未到" value="0"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="咨询师" prop="teacherName">
                    <el-select
                        v-model="formInline.teacherName"
                        placeholder="全部"
                        clearable
                        @change="handleChange"
                    >
                        <el-option v-for="item in teacherList" :key="item.id" :label="item.name" :value="item.name"/>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" :icon="Search" @click="searchList">搜索</el-button>
                    <el-button :icon="Refresh" @click="resetForm(formRef)">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div style="position: relative">
            <p>统计：&nbsp;&nbsp;咨询时长：{{ Math.floor(data / 60) + "小时" + data % 60 + "分钟" }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;咨询次数：{{
                    total
                }}</p>
            <el-table :data="tableData" style="width: 100%" #default="scope">
                <el-table-column prop="index" label="序号" width="80" align="center"/>
                <el-table-column prop="name" label="学生姓名" width="120" align="center"/>
                <el-table-column prop="psyClass" label="班级" width="120" align="center"/>
                <el-table-column prop="stuNmu" label="学号" width="120" align="center"/>
                <el-table-column prop="phone" label="手机号" width="120" align="center"/>
                <el-table-column prop="psyTeacher" label="咨询师" width="120" align="center"/>
                <el-table-column prop="content" label="问题描述" width="120" align="center"/>
                <el-table-column prop="scheduling" label="咨询时间" width="200" align="center"/>
                <el-table-column prop="mode" label="咨询方式" width="120" align="center"/>
                <el-table-column prop="modeLabel" label="咨询类型" width="120" align="center"/>
                <el-table-column prop="duration" label="咨询时长" width="120" align="center"/>
                <el-table-column prop="remainingForbiddenHour" label="禁用剩余时长" width="120" align="center"/>
                <el-table-column label="赴约状态" width="120" align="center">
                    <template #default="scope">
                        <el-button plain @click="changeFormVisible(scope.$index)" v-if="arriveView[scope.$index] ==1 && arriveList[scope.$index]=='0'"
                                   class="noArrive">
                            未到
                        </el-button>
                        <el-button plain v-else-if="arriveView[scope.$index] ==1 && arriveList[scope.$index]=='1'" class="arrive">
                            已到
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="咨询状态" width="120" align="center"/>
                <el-table-column fixed="right" label="操作" width="200">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="handleClick(scope.$index)" v-if="arriveView[scope.$index] ==1">
                            查看
                        </el-button>
                        <el-button link type="primary" size="small" @click="forbidden(scope.row.id)" v-if="arriveView[scope.$index] ==1">禁用</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination background layout="prev, pager, next" :total='total' :current-page.sync="params.pageNum"
                           @current-change="handleCurrentChange" class="page"/>
        </div>
        <!--        修改状态-->
        <el-dialog v-model="dialogFormVisible" title="提示" width="500">
            <span>确认修改状态为已到？</span>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="changeArriveObj">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <!--        查看信息-->
        <el-dialog v-model="handleClickView" title="查看信息" width="400">
            <el-descriptions
                class="margin-top"
                :column="1"
                border
            >
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            姓名
                        </div>
                    </template>
                    {{ handleClickListObj.name }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            班级
                        </div>
                    </template>
                    {{ handleClickListObj.psyClass }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            学号
                        </div>
                    </template>
                    {{ handleClickListObj.stuNmu }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            咨询师
                        </div>
                    </template>
                    {{ handleClickListObj.psyTeacher }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            咨询方式
                        </div>
                    </template>
                    {{ handleClickListObj.mode }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            赴约状态
                        </div>
                    </template>
                    {{ handleClickListObj.state === '1' ? '已到' : '未到' }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            咨询时间
                        </div>
                    </template>
                    {{ handleClickListObj.scheduling }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            问题描述
                        </div>
                    </template>
                    {{ handleClickListObj.content }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            学生反馈
                        </div>
                    </template>
                    {{ handleClickListObj.studentFeedback }}
                </el-descriptions-item>
            </el-descriptions>
        </el-dialog>
        <!--        禁用-->
        <el-dialog v-model="forbiddenView" title="修改禁用状态" width="200" center="true">
            <el-form :model="forbiddenValue">
                <el-form-item class="forbiddenView">
                    <el-select
                        v-model="forbiddenValue.durationHour"
                        placeholder="不禁用"
                        clearable
                        @change="forbiddenChange"
                    >
                        <el-option label="不禁用" value="0"/>
                        <el-option label="一周" value="168"/>
                        <el-option label="两周" value="336"/>
                        <el-option label="三周" value="504"/>
                        <el-option label="四周" value="672"/>
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="forbiddenView = false">取消</el-button>
                    <el-button type="primary" @click="changeForbiddenObj">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<style scoped lang="scss">
.box {
    padding: 30px;
    margin-bottom: 30px;
}

.demo-form-inline .el-input {
    --el-input-width: 200px;

    ::v-deep(.el-input__wrapper) {
        width: 200px;
    }
}

.demo-form-inline .el-select {
    --el-select-width: 200px;

    ::v-deep(.el-input__wrapper) {
        width: 180px;
    }
}

::v-deep(.el-input__wrapper) {
    width: 220px;
}

//时间选择器
.demo-datetime-picker .block {
    padding: 30px 0;
    text-align: center;
}

p {
    font-size: 14px;
    //font-weight: 100;
}

.page {
    //margin-top: 20px;
    position: absolute;
    //top: 20px;
    bottom: -50px;
    right: 10px;
}

.el-tag {
    cursor: pointer;
}

.noArrive {
    background-color: #FF4949;
    color: white;
}

.arrive {
    background-color: #3F9CFB;
    color: white;
}

::v-deep(.forbiddenView) {
    width: 150px;

    .el-input__wrapper {
        width: 150px;
    }
}
::v-deep(.el-dialog__header){
    position: relative;
    background-color: #1892FF;
    .el-dialog__headerbtn{
        height: 54.67px;
        position: absolute;
        top:0px;
        right: -16px;
        background-color: #1892FF;
        svg{
            color: white;
        }
    }
    span{
        color: #FFFFFF;
    }
}
</style>
